<template>
  <div class="x-tab" :style="{ width: width + 'px' }">
    <slot></slot>
    <div
      v-show="value >= 0 && value < $slots.default.length"
      class="slider"
      ref="slider"
      :style="{
        width: childrenWidth + 'px',
        transform: `translateX(${value * childrenWidth}px)`,
      }"
    ></div>
  </div>
</template>

<script>
  export default {
    name: 'x-tab',
    props: {
      value: {
        default: 0,
      },
      width: {
        type: Number,
        default: 310,
      },
    },

    data() {
      return {
        activeIndex: this.value,
      }
    },

    watch: {
      activeIndex(newIndex) {
        this.$emit('input', newIndex)
      },
    },
    computed: {
      childrenWidth() {
        return (this.width - 4) / this.$slots.default.length
      },
    },
  }
</script>

<style lang="scss" scoped>
  .x-tab {
    position: relative;
    display: flex;
    box-sizing: border-box;
    height: 48px;
    border-radius: 24px;
    background-color: rgba(230, 237, 245, 1);
    padding: 4px;

    .slider {
      z-index: 3;
      position: absolute;
      height: 40px;
      top: 4px;
      left: 4px;
      border-radius: 24px;
      transition: transform 0.3s ease;
      background-color: rgba(63, 140, 255, 1);
    }
  }
</style>
